<template>
    <div class="zujian_wp">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in swiper" :key="index">
                    <img :src=item alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="shouhou">
            <div class="shouhou_item">
                <img src="" alt="">
                <p class="fo_co">骆驼自营爆品</p>
            </div>
            <div class="shouhou_item">
                <img src="" alt="">
                <p class="fo_co">7天无忧退换货</p>
            </div>
            <div class="shouhou_item">
                <img src="" alt="">
                <p class="fo_co">快递包邮</p>
            </div>
        </div>
        <div class="huitiao"></div>
        <div>
            <ul class="li_wp">
                <li v-for="(item, index) in menu" :key="index" class="menu_item">
                    <img :src=item.img alt="">
                    <p>{{item.title}}</p>
                </li>
            </ul>
        </div>
        <div>
            <div class="fangshai_title">
                <p>户外系列</p>
                <img src="../../static/img/you.png" alt="" class="you">
            </div>
            <img src="https://topic.camel.com.cn/module/wap_index_column01_main/d6382214-a349-44a7-9853-37207f825afb.jpg!/fw/540" alt="" class="fangshai_img">
            <div style="display:flex;flex-wrap:wrap;">
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A9S155102/aeda429c-4551-4844-ba98-ae304d347aa0.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">情侣款皮肤衣</p>
                        <p class="fangshai_item_money">￥
                            <span>219</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">5色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A9S155102/aeda429c-4551-4844-ba98-ae304d347aa0.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">情侣款皮肤衣</p>
                        <p class="fangshai_item_money">￥
                            <span>219</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">5色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A9S155102/aeda429c-4551-4844-ba98-ae304d347aa0.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">情侣款皮肤衣</p>
                        <p class="fangshai_item_money">￥
                            <span>219</span>
                        </p>
                        <div style="display:flex;justify-content:center;" class="fon_wp">
                            <p class="fangshai_item_style">5色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A9S155102/aeda429c-4551-4844-ba98-ae304d347aa0.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">情侣款皮肤衣</p>
                        <p class="fangshai_item_money">￥
                            <span>219</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">5色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A9S155102/aeda429c-4551-4844-ba98-ae304d347aa0.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">情侣款皮肤衣</p>
                        <p class="fangshai_item_money">￥
                            <span>219</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">5色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A9S155102/aeda429c-4551-4844-ba98-ae304d347aa0.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">情侣款皮肤衣</p>
                        <p class="fangshai_item_money">￥
                            <span>219</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">5色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="fangshai_title">
                <p>男鞋系列</p>
                <img src="../../static/img/you.png" alt="" class="you">
            </div>
            <div class="xie">
                <div>
                    <p class="xie_name">男士休闲沙滩鞋</p>
                    <img src="https://img01.camel.com.cn/product/image/A822307647/8feaf6df-dd3c-4804-81b5-a8a3fd8b7120.jpg!/fw/115" alt="" class="xie_style">
                </div>
                <div>
                    <p class="xie_name">男士休闲沙滩鞋</p>
                    <img src="https://img01.camel.com.cn/product/image/A822307647/8feaf6df-dd3c-4804-81b5-a8a3fd8b7120.jpg!/fw/115" alt="" class="xie_style">
                </div>
                <div>
                    <p class="xie_name">男士休闲沙滩鞋</p>
                    <img src="https://img01.camel.com.cn/product/image/A822307647/8feaf6df-dd3c-4804-81b5-a8a3fd8b7120.jpg!/fw/115" alt="" class="xie_style">
                </div>
                <div>
                    <p class="xie_name">男士休闲沙滩鞋</p>
                    <img src="https://img01.camel.com.cn/product/image/A822307647/8feaf6df-dd3c-4804-81b5-a8a3fd8b7120.jpg!/fw/115" alt="" class="xie_style">
                </div>
                <div>
                    <p class="xie_name">男士休闲沙滩鞋</p>
                    <img src="https://img01.camel.com.cn/product/image/A822307647/8feaf6df-dd3c-4804-81b5-a8a3fd8b7120.jpg!/fw/115" alt="" class="xie_style">
                </div>
            </div>
        </div>
        <div>
            <div class="fangshai_title">
                <p>男装系列</p>
                <img src="../../static/img/you.png" alt="" class="you">
            </div>
            <img src="https://topic.camel.com.cn/module/wap_index_column03_main/dac86f28-462b-4316-8ebb-617ed249a89b.jpg!/fw/540" alt="" class="fangshai_img">
            <div style="display:flex;flex-wrap:wrap;">
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/X9B200130/2c2b1807-f595-4eeb-aaa2-38951c809b33.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">圆领短袖t恤</p>
                        <p class="fangshai_item_money">￥
                            <span>79</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">7色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/X9B200130/2c2b1807-f595-4eeb-aaa2-38951c809b33.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">圆领短袖t恤</p>
                        <p class="fangshai_item_money">￥
                            <span>79</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">7色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/X9B200130/2c2b1807-f595-4eeb-aaa2-38951c809b33.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">圆领短袖t恤</p>
                        <p class="fangshai_item_money">￥
                            <span>79</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">7色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/X9B200130/2c2b1807-f595-4eeb-aaa2-38951c809b33.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">圆领短袖t恤</p>
                        <p class="fangshai_item_money">￥
                            <span>79</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">7色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="fangshai_title">
                <p>专题</p>
                <img src="../../static/img/you.png" alt="" class="you">
            </div>
            <div style="overflow:hidden;">
                <div class="zhuanti_img_wp">
                    <div>
                        <img src="https://topic.camel.com.cn//topic/images/20171011/d32923d5-302c-4fff-874d-52f1aed13713.jpg!/fw/432" alt="">
                    </div>
                    <div>
                        <img src="https://topic.camel.com.cn//topic/images/20171011/d32923d5-302c-4fff-874d-52f1aed13713.jpg!/fw/432" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="fangshai_title">
                <p>女鞋系列</p>
                <img src="../../static/img/you.png" alt="" class="you">
            </div>
            <img src="https://topic.camel.com.cn/module/wap_index_column04_main/8e2fbc6d-6beb-45d5-adb9-8aff87a386f7.jpg!/fw/540" alt="" style="width:100%;">
            <div style="display:flex;flex-wrap:wrap;">
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A925146108/19b4617f-fa97-4dc7-96b7-a58d93c7020d.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">一字带高跟凉鞋</p>
                        <p class="fangshai_item_money">￥
                            <span>149</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">3色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A925146108/19b4617f-fa97-4dc7-96b7-a58d93c7020d.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">一字带高跟凉鞋</p>
                        <p class="fangshai_item_money">￥
                            <span>149</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">3色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A925146108/19b4617f-fa97-4dc7-96b7-a58d93c7020d.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">一字带高跟凉鞋</p>
                        <p class="fangshai_item_money">￥
                            <span>149</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">3色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A925146108/19b4617f-fa97-4dc7-96b7-a58d93c7020d.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">一字带高跟凉鞋</p>
                        <p class="fangshai_item_money">￥
                            <span>149</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">3色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A925146108/19b4617f-fa97-4dc7-96b7-a58d93c7020d.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">一字带高跟凉鞋</p>
                        <p class="fangshai_item_money">￥
                            <span>149</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">3色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="fangshai_title">
                <p>运动瑜伽</p>
                <img src="../../static/img/you.png" alt="" class="you">
            </div>
            <img src="https://topic.camel.com.cn/module/wap_index_yundong_yujia/34b43ed4-bff9-439e-8e3f-8d30862e684c.jpg!/fw/540" alt="" style="width:100%;">
            <div style="display:flex;flex-wrap:wrap;">
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A7S1U8135/1cdb0b3a-270b-4198-9000-300c56e62e24.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name" style="color:#888;font-size:0.12rem;">一套解决运动穿搭烦恼</p>
                        <p class="fangshai_item_name">修身瑜伽服五件套</p>
                        <p class="fangshai_item_money">￥
                            <span>229</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">3色可选</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A7S1U8135/1cdb0b3a-270b-4198-9000-300c56e62e24.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">修身瑜伽服五件套</p>
                        <p class="fangshai_item_money">￥
                            <span>229</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">3色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
                <div class="fangshai_item elses bor_ri">
                    <div class="fangshai_item_img">
                        <img src="https://img01.camel.com.cn/product/image/A7S1U8135/1cdb0b3a-270b-4198-9000-300c56e62e24.jpg!/fw/194" alt="">
                    </div>
                    <div>
                        <p class="fangshai_item_name">修身瑜伽服五件套</p>
                        <p class="fangshai_item_money">￥
                            <span>229</span>
                        </p>
                        <div style="display:flex;justify-content:center;">
                            <p class="fangshai_item_style">3色可选</p>
                            <p class="xinpin">2019新品</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottoms">
            <p>客服电话：4000033088</p>
            <p>京ICP备12001814号 Copyright © 北京骆驼鞋业有限公司</p>
        </div>
        <div class="circle">
            <img src="../../static/img/msg.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            swiper: [
                "https://topic.camel.com.cn/module/wap_home_banner_main/bf42af9f-dbb0-4429-82f0-cfb4c0237aa4.jpg!/fw/540",
                "https://topic.camel.com.cn/module/wap_home_banner_main/bf42af9f-dbb0-4429-82f0-cfb4c0237aa4.jpg!/fw/540"
            ],
            menu: [
                {
                    img:
                        "https://img01.camel.com.cn/product_class/20190603/fca22cd5-8b2d-43ec-b3ed-0e5f559f5999.jpg!/fw/86",
                    title: "户外"
                },
                {
                    img:
                        "https://img01.camel.com.cn/product_class/20190603/b9b5b7f1-dc7a-4723-9d38-be00ef1ffd03.jpg!/fw/86",
                    title: "运动"
                },
                {
                    img:
                        "https://img01.camel.com.cn/product_class/20190603/674eb1e3-5adf-4f7b-af2d-2f6883528ed6.jpg!/fw/86",
                    title: "瑜伽"
                },
                {
                    img:
                        "https://img01.camel.com.cn/product_class/20190603/975325a2-decd-4045-a951-dd2583c31087.jpg!/fw/86",
                    title: "男鞋"
                },
                {
                    img:
                        "https://img01.camel.com.cn/product_class/20190603/fe02dffc-f8b7-414c-9e53-e8cc00bec4e0.jpg!/fw/86",
                    title: "男装"
                },
                {
                    img:
                        "https://img01.camel.com.cn/product_class/20190603/80f12175-b5d3-4991-ad81-900120b08127.jpg!/fw/86",
                    title: "女鞋"
                },
                {
                    img:
                        "https://img01.camel.com.cn/product_class/20190603/968a097f-76a3-489a-823f-3beae7d3b564.jpg!/fw/86",
                    title: "箱包"
                },
                {
                    img:
                        "https://img01.camel.com.cn/images/product_category_all_02.jpg",
                    title: "全部"
                }
            ]
        };
    },
    mounted() {
        var mySwiper = new Swiper(".swiper-container", {
            direction: "horizontal", // 垂直切换选项
            pagination: {
                el: ".swiper-pagination",
                type: "bullets"
            },
            loop: true
        });
    }
};
</script>

<style scoped>
/* .elses {
    margin-top: -2px;
} */
img {
    border: none;
    display: block;
}
.swiper-container {
    width: 100%;
    height: 1.6rem;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
}
.shouhou_item {
    display: flex;
    align-items: center;
}
.fo_co {
    color: #7f2400;
    font-size: 0.05rem;
    margin-left: 3px;
}
.shouhou {
    display: flex;
    justify-content: space-around;
    height: 0.3753rem;
}
.shouhou img {
    height: 0.1rem;
    width: 0.1rem;
}
.huitiao {
    width: 100%;
    background-color: #f4f3f3;
    height: 0.13rem;
}
.li_wp {
    display: flex;
    flex-wrap: wrap;
    padding: 0.041rem 0;
}
.menu_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 0.8rem;
    width: 0.8rem;
}
.menu_item img {
    width: 0.513rem;
}
.fangshai_title {
    display: flex;
    height: 0.4rem;
    align-items: center;
    padding: 0 0.1rem;
    justify-content: space-between;
    background-color: #f4f3f3;
}
.fangshai_title p {
    font-size: 0.15rem;
}
.you {
    width: 0.12rem;
}
.fangshai_img {
    width: 100%;
    margin: 0;
    padding: 0;
}
.fangshai_item {
    width: 1.59rem;
    border-top: 1px solid #f4f4f3;
    padding-bottom: 0.125rem;
    height: 2.215rem;
}
.fangshai_item_img {
    height: 1.433rem;
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
}
.fangshai_item_img img {
    width: 1.153rem;
}
.fangshai_item_name {
    color: #353535;
    font-size: 0.159rem;
    padding: 0 0.065rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
}
.fangshai_item_money {
    color: #ba3809;
    font-size: 0.16rem;
    text-align: center;
}
.fangshai_item_style {
    border: 1px solid #cacaca;
    background-color: #e8e8e8;
    border-radius: 1px;
    opacity: 0.75;
    color: #9b9b9b;
    font-size: 0.1rem;
    padding: 0 0.016rem;
    text-align: center;
}
.xinpin {
    border: 1px solid #e03045;
    border-radius: 1px;
    color: #e03045;
    font-size: 0.1rem;
    margin: 0 0.1rem;
    padding: 0 0.03rem;
}
.bor_ri {
    border-right: 1px solid #f4f3f3;
}
.xie {
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    display: inline-flex;
    background-color: #f4f3f3;
    position: relative;
    height: 1.55rem;
    overflow-x: auto;
}
.xie::-webkit-scrollbar,
.zhuanti_img_wp::-webkit-scrollbar {
    display: none;
}
.xie div {
    background-color: #fff;
    margin-right: 0.05rem;
}
.xie div p {
    width: 1.14rem;
}
.xie_style {
    width: 0.774rem;
    display: block;
    position: relative;
    margin: 0 auto;
}
.xie_name {
    color: #888;
    font-size: 0.1rem;
    padding-top: 0.1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.zhuanti_img_wp {
    display: inline-flex;
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 0.125rem;
}
.zhuanti_img_wp div {
    margin-right: 0.085rem;
    height: 1.192rem;
}
.zhuanti_img_wp img {
    height: 1.192rem;
}
.bottoms {
    background-color: #f4f3f3;
    width: 100%;
    height: 0.5rem;
    margin-bottom: 0.38rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bottoms p {
    font-size: 0.1rem;
    color: #666;
    text-align: center;
}
.circle {
    height: 0.351rem;
    width: 0.351rem;
    border-radius: 50%;
    background-color: orange;
    line-height: 0.351rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 0.1rem;
    bottom: 0.5rem;
}
.circle img {
    height: 0.25rem;
    width: 0.25rem;
}
</style>
